<template>
    <div class="resetPassword">
<h1>密码重置页面</h1>
请输入邮箱：<input  v-model="emailNumber" class="inputEmail" type=email >  </input>
<el-button type="primary" @click="sendEmail">重置密码</el-button>

<br>
请输入验证码：<input type="text" v-model="code" class="inputEmail"/>

<el-button type="success" @click="sendCode">提交</el-button>

<div>
<!-- 修改密码表单,一个对话框 -->
<el-dialog v-model="isPassword"   title="用户修改密码"   width="30%"  draggable=true>
    <el-form label-width="120px" v-model="passwordFrom">
      
        <el-form-item label="密码">
            <el-input  type="password" v-model="passwordFrom.password" show-password   clearable   >
              <template #prefix>
        <el-icon><Lock /></el-icon>
        </template>
            </el-input>
        </el-form-item>
        <el-form-item label="确认密码">
            <el-input  type="password" v-model="passwordFrom.doPassword" show-password   clearable  >
              <template #prefix>
        <el-icon><Lock /></el-icon>
        </template>
            </el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="sendPassword" >提交</el-button>
            <el-button @click="closeRegister">取消</el-button>
        </el-form-item>
    </el-form>
</el-dialog>
</div>
</div>

</template>

<script  setup>
import {resetPassword,sendSysCode,sendSysPassword} from "@/api/ResetPassword"
import { ref } from "vue";
import { useRouter } from 'vue-router';


let emailNumber = ref('')

let code = ref('')

let isPassword = ref(false)

let passwordFrom = ref({
    password:'',
    doPassword:'',
    email:""
})

const router = useRouter()

const sendEmail = async() => {
console.log(emailNumber.value);
  const data= await resetPassword(emailNumber.value)
  
console.log(data);

}


const sendCode = async() => {

  const data= await sendSysCode(code.value,emailNumber.value)
  
if(data.code==200){
    alert("验证码正确，请修改密码")
    isPassword.value=true
}else{
    alert("验证码错误，请重新输入")
}


console.log(data);

}

const sendPassword = async() => {
    if(passwordFrom.value.password==passwordFrom.value.doPassword){
        passwordFrom.value.email=emailNumber.value
        const data= await sendSysPassword(passwordFrom.value)
        console.log(data);
            if(data.code==200){
                alert("密码修改成功")
                isPassword.value=false
                router.replace({name:"login"})

            }else{
                alert("密码修改失败====>"+data.message)

                isPassword.value=false
            }
    }else{
        alert("两次密码不一致,请重新输入")
    }


}


const closeRegister = () => {
    isPassword.value=false
}





</script>

<style lang="scss" scoped>
.inputEmail{
    width: 300px;
    height: 40px;
}


 .resetPassword{

    max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f0f2f5;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
 }

</style>